<script setup>
import { defineProps } from 'vue';

const { label, labelWidth = 60 } = defineProps({
  label: String,
  labelWidth: Number
});
</script>

<template>
  <div class="data-list-row">
    <div class="data-list-row-label" :style="`width: ${labelWidth}px;`" v-if="label">
      {{ label }}
    </div>
    <div class="data-list-row-value" :style="`width: calc(100% - ${labelWidth}px - 15px);`">
      <slot name="default"></slot>
    </div>
  </div>
</template>

<style scoped>
.data-list-row {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  margin-bottom: 0.35rem;
}
.data-list-row-label {
  text-align: justify;
  text-align-last: justify;
}
.data-list-row-value {
  margin-left: 15px;
  word-break: break-all;
  max-width: 500px;
}

div {
  margin: 0;
  padding: 0;
}
</style>
